<template>
	<navigatorComp title="福币充值" bgcColor="#121512" fontColor="#fff"></navigatorComp>

	<view class="content">
		<view class="recharge_detail" @click="goUrl('/subPages/mine/cloudCoin/detail')">
			<image src="http://112.124.50.179:8888/imgs/mine/coin_bgc2.png" mode="" class="bgcImg"></image>
			<view>
				<view class="recharge_price_intro">我的福币</view>
				<view class="recharge_price display_flex">
					<view>{{userInfo.ybCoinNumber}}</view>
					<image src="http://112.124.50.179:8888/imgs/home/coin.png" mode=""></image>
				</view>
			</view>
			<view class="recharge_mingxi display_flex">
				查看明细
				<up-icon name="arrow-right" color="#0E0E0E" size="12" style="margin-left: 5rpx"></up-icon>
			</view>
		</view>

		<view class="recharge_options">
			<view :class="['recharge_option', rechargeCheck == index && 'recharge_checked']"
				v-for="(item, index) in rechargeOptions" @click="rechargeCheck = index">
				<image v-if="rechargeCheck == index" class="recharge_checkImg" src="http://112.124.50.179:8888/imgs/mine/coin_check.png"
					mode=""></image>
				<view class="recharge_coin_send" v-if="item.additionalGiftQuantity">
					<image src="http://112.124.50.179:8888/imgs/mine/coin_send.png" mode=""></image>
					<view class="recharge_coin_sendText">赠送{{ item.additionalGiftQuantity }}个</view>
				</view>
				<view class="recharge_coin display_flex">
					<view>{{ item.giftQuantity }}</view>
					<image src="http://112.124.50.179:8888/imgs/home/coin.png" mode=""></image>
				</view>
				<view class="recharge_price">¥ {{ item.rechargeAmount }}.00</view>
			</view>
		</view>

		<view class="recharge_footerBtn">
			<view class="footerBox"></view>
			<view class="footerFixed">
				<view class="footer_btn"
					@click="goUrl('/subPages/mine/cloudCoin/pay?item='+JSON.stringify(rechargeOptions[rechargeCheck]))">
					立即充值{{ rechargeOptions[rechargeCheck].rechargeAmount }}元
				</view>
				<view class="recharge_tip">
					充值即代表您已同意
					<text style="color: #4489fd">《先贤祠墓纪念堂充值协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	import navigatorComp from '/components/navigator/index.vue';
	import store from '@/store/index.js'; //需要引入store
	import MineApi from '@/API/mine/index.js';
	const mineApi = new MineApi();
	onShow(() => {
		getUser()

	});
	onLoad(() => {
		mineApi.getRechargeList({}).then((res) => {
			rechargeOptions.value = res.data.rechargeList || [{
				rechargeAmount: ''
			}]
		}).catch(() => {})

	});
	let userInfo = ref({})
	const rechargeCheck = ref(0);
	const rechargeOptions = ref([{
			price: 10,
			coin: 100,
			send: 0
		},
		{
			price: 30,
			coin: 300,
			send: 10
		},
		{
			price: 50,
			coin: 500,
			send: 50
		},
		{
			price: 100,
			coin: 1000,
			send: 100
		},
		{
			price: 200,
			coin: 2000,
			send: 200
		},
		{
			price: 500,
			coin: 5000,
			send: 500
		},
		{
			price: 1000,
			coin: 10000,
			send: 1000
		},
		{
			price: 2000,
			coin: 20000,
			send: 2000
		},
		{
			price: 5000,
			coin: 50000,
			send: 5000
		}
	]);
	const getUser = async () => {
		await store.dispatch('setUserInfo');
		userInfo.value = store.state.userInfo.userInfo;
	};
	const goUrl = (url) => {
		uni.navigateTo({
			url: url
		});
	};
</script>

<style lang="scss">
	page {
		background-color: #121512;
		/* #ifdef H5 */
		padding-top: 0;
		/* #endif */
	}

	.content {
		padding: 24rpx 32rpx;
	}

	.recharge_detail {
		width: 100%;
		height: 202rpx;
		border-radius: 8rpx;
		margin-right: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		box-sizing: border-box;
		background-color: #fff;
		position: relative;
		overflow: hidden;

		.bgcImg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.recharge_price {
			position: relative;
			font-weight: 500;
			font-size: 40rpx;
			color: #0e0e0e;
			line-height: 47rpx;
			letter-spacing: 1px;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-left: 12rpx;
			}
		}

		.recharge_price_intro {
			position: relative;
			font-weight: 500;
			font-size: 24rpx;
			color: #0e0e0e;
			line-height: 28rpx;
			margin-bottom: 8rpx;
		}

		.recharge_mingxi {
			position: relative;
			width: 168rpx;
			height: 50rpx;
			border-radius: 25rpx 25rpx 25rpx 25rpx;
			border: 2rpx solid #0e0e0e;
			font-weight: 400;
			font-size: 24rpx;
			color: #0e0e0e;
			line-height: 28rpx;
		}
	}

	.recharge_options {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-column-gap: 18rpx;
		grid-row-gap: 40rpx;
		margin-top: 64rpx;

		.recharge_checked {
			border: 4rpx solid #f3e0bb !important;
		}

		.recharge_option {
			height: 168rpx;
			border-radius: 8rpx;
			border: 2rpx solid #666666;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;

			.recharge_checkImg {
				position: absolute;
				width: 64rpx;
				height: 66rpx;
				bottom: -4rpx;
				right: -4rpx;
			}

			.recharge_coin_send {
				position: absolute;
				width: 135rpx;
				height: 48rpx;
				top: -16rpx;
				left: -12rpx;

				.recharge_coin_sendText {
					position: absolute;
					left: 0;
					top: -7rpx;
					width: 135rpx;
					height: 48rpx;
					font-weight: 400;
					font-size: 20rpx;
					color: #333333;
					line-height: 48rpx;
					text-align: center;
				}

				image {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					z-index: 0;
				}
			}

			.recharge_coin {
				position: relative;
				font-weight: 500;
				font-size: 40rpx;
				color: #ffffff;
				line-height: 47rpx;
				letter-spacing: 1px;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-left: 12rpx;
				}
			}

			.recharge_price {
				font-weight: 400;
				font-size: 28rpx;
				color: #ffffff;
				line-height: 33rpx;
				margin-top: 8rpx;
			}
		}
	}

	.recharge_footerBtn {
		width: 100%;
		z-index: 101 !important;

		.footerBox {
			width: 100%;
			height: calc(env(safe-area-inset-bottom) + 120rpx);
		}

		.footerFixed {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			/* #ifdef H5 */
			height: 182rpx;
			/* #endif */
			/* #ifndef H5 */
			height: calc(env(safe-area-inset-bottom) + 176rpx);
			/* #endif */
			display: flex;
			align-items: center;
			flex-direction: column;
			padding: 16rpx 0 32rpx 0;
			box-sizing: border-box;
		}

		.footer_btn {
			width: 622rpx;
			height: 88rpx;
			box-sizing: border-box;
			background: #f3e0bb;
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			font-size: 32rpx;
			color: #524630;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.footer_btn_inActive {
			opacity: 0.5;
		}

		.recharge_tip {
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 28rpx;
			margin-top: 16rpx;
		}
	}
</style>